<template>
  <div class="fml-nav-menu">
    <div class="fml-nav-log animated fadeInLeft"></div>
    <el-carousel
      indicator-position="none"
      class="nav-menu-box animated fadeInRight"
      :autoplay="false"
      :loop="false"
      v-if="!navListLoading">
      <el-carousel-item v-for="(bigArr ,index) in bigArrList" :key="index">
        <div class="nav-menu-box flex flex-wrap animated fadeInRight">
          <div
            class="nav-menu-block flex flex-cloumn"
            @click="handleSelect(item.url,item.status,item.id)"
            v-for="item in bigArr"
            :key="item.id"
            :class="item.status !=1?'menu-warning':''">
            <i :class="item.icon?item.icon+' iconfont':'el-icon-setting'"></i>
            <p>{{item.name}}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="fml-none-menu" v-else>
      <p>该账户下暂无相关可用模块, 请联系管理员</p>
      <div>
        <el-button type="danger" size="small"    icon="el-icon-remove-outline" @click="logout">退出登录</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
   data() {
    return {
      navListLoading:false,
      bigArrList: []
    };
  },
  methods:{
    // 退出
    logout(state){
      let url =this.$api.$domain+ "/logout?Authentication=" + this.$store.state.Token
      sessionStorage.clear()
      window.location.href=url
    },
    // 系统项目选择
    handleSelect(url, warning, id) {
      if (warning != 1) return;//运行异常状态不可访问
      if (id == 2) {//代表属于本部项目系统
        this.$router.replace({path:'/main'})
      } else {
        window.open(url);
      }
    },
    //获取项目系统列表
    async navList() {
      let [err, result] = await this.$fetchService.fetchGet({},'navList',false);
      if (err)
        return this.$message({
          type: "error",
          message: err.message || "获取导航页信息出错",
          showClose: true
        });
      let data = result.data;
      if(!data||data.length==0)return this.navListLoading=true
      this.navListLoading=false
      let big = [];
      let dataSize = result.data.length / 8;
      for (var i = 0; i < dataSize; i++) {
        big.push(data.slice(i * 8, 8 * i + 8));
      }
      this.bigArrList = big;
    }
  },
  created(){
    if(!this.$route.query.Authentication)return this.$router.replace('/login')
    sessionStorage.setItem('Token',this.$route.query.Authentication)
    this.$store.commit('setToken',this.$route.query.Authentication)
    this.navList()
  },
})
</script>
<style lang="scss" scoped>
.fml-none-menu{
  color:white;
  width:260px;
  height:80px;
  position: absolute;
  top:50%;
  margin-top:-40px;
  margin-left:-130px;
  text-align: center;
  left:50%;
  p{
    margin-bottom: 10px;
  }

}
.fml-nav-menu {
  background: #061546 url("../assets/images/nav_bg.png") no-repeat;
  background-size: 100% 100%;
  max-width: 100%;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
}
.fml-nav-log {
  background: url("../static/logo_login.png") no-repeat;
  background-size: 100% 100%;
  max-width: 100%;
  width: 497px;
  height: 150px;
  margin-left: 141px;
  top: 21px;
  position: absolute;
}
.nav-menu-box {
  width: 917px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -200px 0 0 -458px;
}
.nav-menu-block {
  width: 141px;
  height: 161px;
  margin: 32px 43px;
  font-size: 16px;
  i {
    font-size: 41px;
    margin-bottom: 18px;
  }
}
.nav-menu-block:not(.menu-warning) {
  background: url("../static/bg_cs.png") center center no-repeat;
  cursor: pointer;
  color: #a6eaff;
  &:hover {
    background: url("../static/hover.png") center center no-repeat;
    color: #fff;
    i {
      color: #fff;
    }
  }
  i {
    color: #a6eaff;
  }
}
.nav-menu-block.menu-warning {
  background: url("../static/button_bg_h.png") center center no-repeat;
  cursor: not-allowed;
  color: #a4a4a4;
  i {
    font-size: 41px;
    color: #a4a4a4;
    margin-bottom: 18px;
  }
}
@media screen and (max-width: 1024px) {
  .nav-menu-box {
    width: 776px;
    position: absolute;
    top: 50%;
    margin-top: -144.5px;
    left: 50%;
    margin: -170px 0 0 -373px;
  }
  .nav-menu-block {
    margin: 16px 22px;
  }
}
</style>
